
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>JustAuth - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>JustAuth - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">OAuth是什么？文档中如何区分“认证”与“授权”？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth（Open Authorization）是一种开放认证授权协议。文档中定义，“认证”是验证用户身份的过程（如账号登录、指纹识别），而“授权”是控制用户访问权限的过程（判断用户是否被允许做某件事）。</div>
          </div>
          <div class="card-source">来源: OAuth是什么</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">OAuth 2.0 是如何解决第三方应用访问受保护资源问题的？关键凭证是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth 引入了一个授权环节。第三方应用请求访问时，资源服务器在获得资源用户授权后，会向第三方应用颁发一个访问令牌（AccessToken）。该令牌包含了授权范围和有效期，第三方应用在后续访问中必须持有此令牌。</div>
          </div>
          <div class="card-source">来源: OAuth2.0有什么用</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在 OAuth 2.0 的授权流程中，涉及的四个核心角色分别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">OAuth 2.0 流程中的四个核心角色是：1. Resource Owner (资源所有者，即用户)；2. Authorization Server (授权服务器，验证身份并派发令牌)；3. Resource Server (资源服务器，托管受保护的用户信息)；4. Client (客户端，即请求访问资源的第三方应用)。</div>
          </div>
          <div class="card-source">来源: OAuth 2 的授权流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中列举了 OAuth 2.0 的五种授权模式，其中最常用的是哪一种？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中列举了授权码模式、授权码简化模式、Pwd模式、Client模式和扩展模式。其中，授权码模式（Authorization Code）被标注为最常用的模式。</div>
          </div>
          <div class="card-source">来源: OAuth2.0有哪几种授权模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在“使用百度账号登录”的示例中，引导用户进行授权的第一步请求需要哪些必须的参数？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">引导用户登录授权的请求中，必须的参数有三个：`client_id` (应用的API Key)，`response_type` (此值固定为“code”)，以及 `redirect_uri` (应用中设置的回调地址)。</div>
          </div>
          <div class="card-source">来源: 引导用户登录</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当用户授权成功后，应用会获得一个 `code`。下一步如何使用这个 `code` 来获取 `Access Token`？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应用需要向 `https://openapi.baidu.com/oauth/2.0/token` 发起请求，并携带五个必须参数：`grant_type` (固定值为 'authorization_code')，`code` (上一步获取的授权码)，`client_id` (应用的API Key)，`client_secret` (应用的Secret Key)，以及 `redirect_uri` (应用的回调地址)。</div>
          </div>
          <div class="card-source">来源: 获取Access Token</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">工具</div>
          <div class="card-question">文档中介绍的 JustAuth 是什么？它旨在解决什么问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">工具</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JustAuth 是一个第三方授权登录的工具类库。它旨在让我们脱离繁琐的第三方登录SDK，使第三方授权登录变得非常简单。</div>
          </div>
          <div class="card-source">来源: JustAuth介绍</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在 JustAuth 的关键词解释中，`clientId` 和 `clientSecret` 是由谁颁发的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`clientId` 是客户端身份标识符（应用id），`clientSecret` 是客户端密钥。这两者都是在申请完OAuth应用后，由第三方平台颁发的。</div>
          </div>
          <div class="card-source">来源: 关键词解释</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">OAuth 流程中的 `redirectUri` 参数具体指什么？它在授权流程中起什么作用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`redirectUri` 是开发者项目中的一个有效API地址。当用户在第三方平台确认授权后，第三方平台会重定向到这个地址，并在URL中附带上 `code` 等关键参数，从而将授权流程的控制权交还给开发者的应用。</div>
          </div>
          <div class="card-source">来源: 关键词解释</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
